<template>
  <view class="container">

    <!-- 阅读统计 -->
    <view class="reading-stats">
      <view class="stats-row">
        <view class="stat-item">
          <text class="stat-label">今日阅读：</text>
          <text class="stat-value">{{ todayReading }}本</text>
        </view>
        <view class="stat-item">
          <text class="stat-label">本周阅读：</text>
          <text class="stat-value">{{ weekReading }}本</text>
        </view>
      </view>
      <view class="stats-row">
        <view class="stat-item">
          <text class="stat-label">阅读天数：</text>
          <text class="stat-value">{{ readingDays }}天</text>
        </view>
        <view class="stat-item">
          <text class="stat-label">加入天数：</text>
          <text class="stat-value">{{ joinDays }}天</text>
        </view>
      </view>
    </view>

    <!-- 清空记录按钮 -->
    <view class="clear-record" @click="clearRecord">
      <text class="clear-text">清空记录</text>
    </view>

    <!-- 加载状态 -->
    <view class="loading-state" v-if="loading">
      <text class="loading-text">加载中...</text>
    </view>

    <!-- 阅读记录列表 -->
    <view class="record-list" v-else>
      <view class="record-item" v-for="(item, index) in recordList" :key="index" @click="openBook(item)">
        <view class="book-cover">
          <image :src="item.cover" mode="aspectFill" class="cover-image"></image>
          <view class="reading-time">
            <text class="time-text">{{ item.readingTime }}</text>
          </view>
        </view>
        <view class="book-info">
          <text class="book-title">{{ item.bookName }}</text>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-if="!loading && recordList.length === 0">
      <text class="empty-text">暂无阅读记录</text>
    </view>
  </view>
</template>

<script>
import * as BookRecordApi from '@/api/bookRecord'
import { clearBookReadingHistory } from '@/api/bookShelf'

export default {
  data() {
    return {
      todayReading: 0,
      weekReading: 0,
      readingDays: 0,
      joinDays: 0,
      recordList: [],
      loading: false
    }
  },

  onLoad() {
    this.loadReadingRecord()
  },

  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack()
    },

    // 加载阅读记录
    async loadReadingRecord() {
      this.loading = true;
      try {
        const response = await BookRecordApi.getBookRecordList();
        
        if (response.code === 0 && response.data) {
          // 更新统计数据
          this.todayReading = response.data.todayReadingTotal || 0;
          this.weekReading = response.data.thisWeekReadingTotal || 0;
          this.readingDays = response.data.readingDays || 0;
          this.joinDays = response.data.numberOfDayAdded || 0;
          
          // 更新阅读记录列表
          this.recordList = (response.data.bookRecordList || []).map(item => ({
            id: item.bookId,
            bookName: item.bookName,
            cover: item.cover,
            readingTime: item.readingTime,
            bookId: item.bookId
          }));
        }
      } catch (error) {
        console.error('加载阅读记录失败:', error);
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        });
      } finally {
        this.loading = false;
      }
    },

    // 清空记录
    async clearRecord() {
      uni.showModal({
        title: '确认清空',
        content: '确定要清空所有阅读记录吗？',
        success: async (res) => {
          if (res.confirm) {
            try {
              // 显示加载提示
              uni.showLoading({
                title: '清空中...'
              });
              
              await clearBookReadingHistory();
              
              // 清空本地数据
              this.recordList = [];
              this.todayReading = 0;
              this.weekReading = 0;
              this.readingDays = 0;
              
              uni.hideLoading();
              uni.showToast({
                title: '记录已清空',
                icon: 'success'
              });
            } catch (error) {
              console.error('清空记录失败:', error);
              uni.hideLoading();
              uni.showToast({
                title: '清空失败',
                icon: 'none'
              });
            }
          }
        }
      });
    },

    // 打开绘本
    openBook(item) {
      // 跳转到绘本详情页
      uni.navigateTo({
        url: `/pages/book/detail?id=${item.bookId || item.id}`
      });
    },

    // 获取难度等级样式类
    getDifficultyClass(difficulty) {
      // 根据难度返回不同的样式类
      return 'difficulty-default'
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 自定义导航栏 */
.custom-navbar {
  background-color: #fff;
  padding-top: var(--status-bar-height);
  border-bottom: 1px solid #eee;
}

.navbar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 16px;
}

.navbar-left {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar-left text {
  font-size: 20px;
  color: #333;
  font-weight: bold;
}

.navbar-title {
  flex: 1;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  color: #333;
}

.navbar-right {
  width: 44px;
}

/* 阅读统计 */
.reading-stats {
  background-color: #fff;
  padding: 20px;
  margin: 16px;
  border-radius: 12px;
}

.stats-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}

.stats-row:last-child {
  margin-bottom: 0;
}

.stat-item {
  flex: 1;
}

.stat-label {
  font-size: 16px;
  color: #666;
}

.stat-value {
  font-size: 16px;
  color: #007AFF;
  font-weight: 500;
}

/* 清空记录按钮 */
.clear-record {
  margin: 0 16px 16px 16px;
  padding: 12px;
  background-color: #fff;
  border-radius: 8px;
  text-align: center;
}

.clear-text {
  font-size: 16px;
  color: #666;
}

/* 阅读记录列表 */
.record-list {
  padding: 0 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.record-item {
  background-color: #fff;
  border-radius: 12px;
  overflow: visible;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.book-cover {
  position: relative;
  width: 100%;
  height: 120px;
  overflow: visible;
}

.cover-image {
  width: 100%;
  height: 100%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.reading-time {
  position: absolute;
  top: -6px;
  left: -6px;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  z-index: 3;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  font-size: 12px;
}

.time-text {
  font-size: 12px;
  color: #fff;
}



.book-info {
  padding: 8px;
}

.book-title {
  font-size: 12px;
  color: #333;
  font-weight: 500;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 加载状态 */
.loading-state {
  text-align: center;
  padding: 60px 20px;
}

.loading-text {
  font-size: 16px;
  color: #666;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 60px 20px;
}

.empty-text {
  font-size: 16px;
  color: #999;
}


</style>